<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;top:0px;left:0px">
            <div style="width:100%">
            </div>
        </el-main>
    </div>
</template>

<script setup>
import * as 天地图 from '../天地图'
import {onMounted,ref,computed} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import SceneView from '@arcgis/core/views/SceneView'
var map,view,要素图层
onMounted(()=>{
    要素图层=new FeatureLayer({
        url:"https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0",
        renderer:{
            type:"simple",
            symbol:{
                type:"simple-marker",
                size:0,
            }
        },
        labelingInfo:{
            labelExpressionInfo:{
                expression:"$feature.name"
            },
            minScale:100000,
            symbol: {//设置标注对应的符号,这里是label-3d,实测用text也可
                type:"label-3d",
                verticalOffset: {
                    screenLength: 150,
                    maxWorldLength: 200,
                    minWorldLength: 100
                },
                callout: {
                    type:"line",
                    color: [255,255,255],
                    size: 2
                },
                symbolLayers: [{
                    type:"text",
                    font:{
                        size:13,
                    },
                    material: {
                        color: "white"
                    },
                    halo: {//晕圈
                        color: [50, 50, 50],//晕圈颜色
                        size: 1,//晕圈尺寸
                    },
                }]
            }
        }
    })
    map=new Map({
        basemap:"satellite",
        ground:"world-elevation",
        layers: [要素图层]
    })
    view = new SceneView({
        map: map,
        container: "viewDiv",
        camera:{
            position:{
                type:"point",
                longitude:120.4,
                latitude:36,
                z:10000
            },
            heading:0,
            tilt:60
        }
    })
    view.ui.remove(["zoom","attribution","compass","navigation-toggle"])
})//onMounted()结尾
</script>

<style scoped>
    #viewDiv,#container{
    height:100%;width:100%;padding:0;margin:0;
    }
</style>
  